// 上架商品信息
function addItem() {
    let add_item_btn = document.getElementById("add_item_btn")
    console.log(add_item_btn);
    let txt = document.querySelectorAll(".txt")
    let txt_name = document.getElementsByClassName("txt")[0].value
    let txt_price = document.getElementsByClassName("txt")[1].value
    let txt_num = document.getElementsByClassName("txt")[2].value
    let txt_color = document.getElementsByClassName("txt")[3].value
    let txt_talk = document.getElementsByClassName("txt")[4].value
    if (txt_name == "" || txt_price == "" || txt_num == "" || txt_color == "" || txt_talk == "") {
        return alert("内容不能为空")
    }
   
    // 创建元素，添加内容
    let tr = document.createElement("tr")
    let td_name = document.createElement("td")
    let td_price = document.createElement("td")
    let td_num = document.createElement("td")
    td_num.className = "kc"
    let td_color = document.createElement("td")
    let td_talk = document.createElement("td")
    let inp_btn_td = document.createElement("td")
    inp_btn_td.innerHTML = '<input type="button" class="add_cart" value="加入购物车" onclick="addCar(this)">' + '&nbsp;' +
        '<input type="button" class="del_cart" value="删除" onclick="delItem(this)">'
    // 将内容按照标签顺序放在标签中
    td_name.innerHTML = txt_name
    td_price.innerHTML = txt_price
    td_num.innerHTML = txt_num
    td_color.innerHTML = txt_color
    td_talk.innerHTML = txt_talk
    // 添加到DOM树
    tr.appendChild(td_name)
    tr.appendChild(td_price)
    // tr.appendChild(inp_btn_td)
    tr.appendChild(td_num)
    tr.appendChild(td_color)
    tr.appendChild(td_talk)
    tr.appendChild(inp_btn_td)
    document.querySelector(".items_box_tbody").appendChild(tr)
    // 提交后输入框内容清空
    for (let key of txt) {
        key.value = ""
    }
}

// 下架商品信息
function reduceItem() {
    let reduce_item_btn = document.getElementById("reduce_item_btn")
    console.log(reduce_item_btn)
    let reduce_txt = document.querySelectorAll(".txt")
    let reduce_txt_name = document.getElementsByClassName("txt")[5].value
    if (reduce_txt_name == "") {
        return alert("内容不能为空！")
    }
    for (let key_name of reduce_txt) {
        key_name.value = ""
    }
    // 获取商品列表
    let item_list_trs = document.getElementsByClassName("items_box_tbody")[0].children
    console.log(item_list_trs)
    // 遍历商品列表，判断商品名称和搜索的商品名称是否一致
    for (let i = 0; i < item_list_trs.length; i++) {
        if (reduce_txt_name == item_list_trs[i].firstElementChild.innerHTML) {
            if (confirm(`是否确认下架${reduce_txt_name}?`)) {
                item_list_trs[i].remove()
            }
        }
    }
}


// 添加购物车方法
function addCar(btn) {
    let items_name = btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML
    console.log(items_name)
    let items_price = btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML
    console.log(items_price);
    let items_kc = parseInt(btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML) - 1
    btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML = items_kc
    console.log(items_kc);

    // 判断库存是否充足,库存不足时，加购按钮置灰
    if (btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML < 1) {
        btn.disabled = true
    }

    // 判断商品是否已添加
    // 获取购物车各行
    let cal_cart_trs = document.getElementById("items").children
    console.log(cal_cart_trs);
    // 遍历购物车各行
    for (let i = 0; i < cal_cart_trs.length; i++) {
        let tr = cal_cart_trs[i]
        // 获取购物车商品的商品名称
        let cal_items_name_value = tr.querySelector(".cal_items_name").innerHTML
        //购物车每行
        console.log(cal_items_name_value);
        // 获取 + 按钮
        let inp_add_btn = tr.querySelector(".cal_items_name").nextSibling.nextSibling.lastElementChild
        console.log(inp_add_btn)
        // 商品名称
        let name = cal_items_name_value
        if (name == items_name) {
            // 调用修改个数方法 
            // +
            // changeNum(1, inp_add_btn)
            btn.disabled = true
            btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML = items_kc + 1
            return alert(`购物车中已存在${items_name}该商品`)
        }
    }

    // 创建购物车表里的元素，添加内容
    let cal_tr = document.createElement("tr")
    // 单选框
    let cal_inp_check_td = document.createElement("td")
    cal_inp_check_td.innerHTML = '<input type="checkbox" class = "selected">'
    // 商品名称和价格
    let cal_items_name = document.createElement("td")
    cal_items_name.className = "cal_items_name"
    let cal_items_price = document.createElement("td")

    let cal_inp_td = document.createElement("td")
    cal_inp_td.innerHTML =
        '<input type="button" value="-" id="reduce" onclick="changeNum(-1, this)">' +
        '<input type="text" id="items_num" size="1" value="1">' +
        '<input type="button" value="+" id="add" onclick="changeNum(1, this)">'

    // 金额
    let cal_money_td = document.createElement("td")
    cal_money_td.className = "money"
    let cal_inp_del_td = document.createElement("td")
    cal_inp_del_td.innerHTML = '<input type="button" value="删除" id ="del_btn" onclick="del(this)"/>'

    // 将内容按照顺序添加到标签中
    cal_items_name.innerHTML = items_name
    cal_items_price.innerHTML = items_price
    cal_money_td.innerHTML = items_price

    // 添加到DOM树中
    cal_tr.appendChild(cal_inp_check_td)
    cal_tr.appendChild(cal_items_name)
    cal_tr.appendChild(cal_items_price)
    cal_tr.appendChild(cal_inp_td)
    cal_tr.appendChild(cal_money_td)
    cal_tr.appendChild(cal_inp_del_td)
    document.querySelector("#items").appendChild(cal_tr)
    // 调用全选函数
    funSelect()
}

// 从商品列表删除商品信息
function delItem(btn) {
    if (confirm(`是否确定删除商品列表里的${btn.parentNode.parentNode.firstElementChild.innerHTML}的商品？`)) {
        let delItem_tr = btn.parentNode.parentNode
        console.log(delItem_tr)
        delItem_tr.remove()
    }
}

// 商品列表全选
function select_all_items_list(btn) {
    let items_list_tbody_tr = btn.parentNode.parentNode.parentNode.previousElementSibling.children
    console.log(items_list_tbody_tr)
    for (let i = 0; i < items_list_tbody_tr.length; i++) {
        let select_all_items_list_name = items_list_tbody_tr[i].firstElementChild.innerHTML
        let select_all_items_list_one_price = items_list_tbody_tr[i].firstElementChild.nextElementSibling.innerHTML

        //  创建节点对象
        let cal_tr = document.createElement("tr")
        // 单选框
        let cal_inp_check_td = document.createElement("td")
        cal_inp_check_td.innerHTML = '<input type="checkbox" class = "selected">'
        // 商品名称和价格
        let cal_items_name = document.createElement("td")
        cal_items_name.className = "cal_items_name"
        let cal_items_price = document.createElement("td")

        let cal_inp_td = document.createElement("td")
        cal_inp_td.innerHTML =
            '<input type="button" value="-" id="reduce" onclick="changeNum(-1, this)">' +
            '<input type="text" id="items_num" size="1" value="1">' +
            '<input type="button" value="+" id="add" onclick="changeNum(1, this)">'

        // 金额
        let cal_money_td = document.createElement("td")
        cal_money_td.className = "money"
        let cal_inp_del_td = document.createElement("td")
        cal_inp_del_td.innerHTML = '<input type="button" value="删除" id ="del_btn" onclick="del(this)"/>'
        // 将内容按顺序添加到标签中
        cal_items_name.innerHTML = select_all_items_list_name
        cal_items_price.innerHTML = select_all_items_list_one_price
        cal_money_td.innerHTML = select_all_items_list_one_price

        // 添加到DOM树中
        cal_tr.appendChild(cal_inp_check_td)
        cal_tr.appendChild(cal_items_name)
        cal_tr.appendChild(cal_items_price)
        cal_tr.appendChild(cal_inp_td)
        cal_tr.appendChild(cal_money_td)
        cal_tr.appendChild(cal_inp_del_td)
        document.querySelector("#items").appendChild(cal_tr)

        // 加入购物车后，对应的库存数减 1
        let select_all_items_list_kc = parseInt(items_list_tbody_tr[i].firstElementChild.nextElementSibling.nextElementSibling.innerHTML) - 1
        console.log(select_all_items_list_kc)
        items_list_tbody_tr[i].firstElementChild.nextElementSibling.nextElementSibling.innerHTML = select_all_items_list_kc
        // 调用全选函数
        funSelect()
    }
}

//计算总金额
function totalMoney() {
    let select_all = document.getElementById("select_all")
    console.log(select_all);
    let tbody_selected = document.getElementById("items")
    let selected = tbody_selected.getElementsByClassName("selected")
    let price = document.getElementsByClassName("money");
    console.log(selected);
    let money = 0
    for (let i = 0; i < selected.length; i++) {
        if (selected[i].checked == true) {
            money += parseFloat(price[i].innerHTML)
        }
    }
    document.getElementById("total").innerHTML = money
}


//修改商品数据及金额
function changeNum(num, btn) {
    // 获取数量框
    let inp = btn.parentNode.querySelectorAll("input")[1]
    console.log(inp)

    let add_cart_kc_tr = document.querySelector(".items_box_tbody").children
    console.log(add_cart_kc_tr)

    // 获取商品名称
    let cart_items_name = btn.parentNode.previousElementSibling.previousElementSibling.innerHTML
    console.log(cart_items_name)

    // 获取数量框的值
    let default_num = parseInt(inp.value)
    if (default_num === 1 && num === -1) {
        return
    }
    let update_num = parseInt(default_num) + num
    // 修改数量
    inp.value = update_num

    // 修改购物车里的商品数量，库存量随之改变
    for (let i = 0; i < add_cart_kc_tr.length; i++) {
        if (cart_items_name == add_cart_kc_tr[i].firstElementChild.innerHTML) {
            add_cart_kc_tr[i].firstElementChild.nextElementSibling.nextElementSibling.innerHTML = parseInt(add_cart_kc_tr[i].firstElementChild.nextElementSibling.nextElementSibling.innerHTML) - num
            if (add_cart_kc_tr[i].firstElementChild.nextElementSibling.nextElementSibling.innerHTML < 1) {
                btn.disabled = true
            } else if (add_cart_kc_tr[i].firstElementChild.nextElementSibling.nextElementSibling.innerHTML > 0) {
                let cal_cart_trs = document.getElementById("items").children
                console.log(cal_cart_trs);
                for (let i = 0; i < cal_cart_trs.length; i++) {
                    cal_cart_trs[i].firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.disabled = false
                }
            }
        }
        let items_one_price = btn.parentNode.previousElementSibling.innerHTML
        console.log(items_one_price)
        // 获取金额
        let cal_money_td = btn.parentNode.nextElementSibling
        cal_money_td.innerHTML = parseFloat(items_one_price) * update_num
    }

    totalMoney()
}



//删除购物车商品,恢复库存数量
function del(btn) {
    if (confirm(`是否确认删除购物车里的${btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML}?`)) {
        // 删除的那条数据
        let tr = btn.parentNode.parentNode
        console.log(tr)
        tr.remove()
    }
    let cal_num = btn.parentNode.previousElementSibling.previousElementSibling.firstElementChild.nextElementSibling.value
    console.log(cal_num)
    let add_cart_kc_tr = document.querySelector(".items_box_tbody").children
    console.log(add_cart_kc_tr)
    console.log(btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML);
    for (let i = 0; i < add_cart_kc_tr.length; i++) {
        // 判断购物车里的商品名称和商品列表里的商品名称是否一致
        if (btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML == add_cart_kc_tr[i].firstElementChild.innerHTML) {
            add_cart_kc_tr[i].lastElementChild.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML = parseInt(add_cart_kc_tr[i].lastElementChild.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML) + parseInt(cal_num)
            add_cart_kc_tr[i].lastElementChild.firstElementChild.disabled = false
        }
    }
    funSelect()
    noDataInCartStatus()
    totalMoney()
}


// 全选与反选
function funSelect() {
    // 全选框与单选框联动
    let select_all = document.getElementById("select_all")
    console.log(select_all);
    let tbody_selected = document.getElementById("items")
    let selected = tbody_selected.getElementsByClassName("selected")
    console.log(selected);
    select_all.onclick = function () {
        //循环遍历将全选框checked的值赋给所有的单选框
        for (let i = 0; i < selected.length; i++) {
            selected[i].checked = this.checked
        }
    }

    // 单选框与全选框联动
    flag = false
    for (let i = 0; i < selected.length; i++) {
        selected[i].onclick = function () {
            for (let i = 0; i < selected.length; i++) {
                if (selected[i].checked == true) {
                    flag = true
                } else {
                    flag = false
                    break
                }
            }
            select_all.checked = flag
        }
    }
}


// 购物车表里没数据，全选按钮置为false
function noDataInCartStatus() {
    let select_all = document.getElementById("select_all")
    console.log(select_all);
    let tbody_selected = document.getElementById("items")
    let selected = tbody_selected.getElementsByClassName("selected")
    console.log(selected);
    // 遍历购物车表，如果没有商品了，则全选按钮状态为false
    console.log(selected.length);
    if (selected.length < 1) {
        select_all.checked = ""
    }
}



